<template>
    <div class="app-container">
      <div style="padding:0 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="searchForm.currentPage"
          :page-sizes="[10,30,50,100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchForm.totalCount">
        </el-pagination>
      </div>
      <table class="_table" border="0" cellpadding="0" cellspacing="0" style="width: 100%" v-loading="loading.list">
        <thead>
        <tr>
          <th>id</th>
          <th>权限</th>
          <th>功能备注</th>
          <th>角色集合</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, key) in list" :key="key">
          <td>{{item.id}}</td>
          <td>{{item.auth}}</td>
          <td>{{item.content}}</td>
          <td>{{item.part_ids}}</td>
          <td><el-button type="primary" @click="onDialogContent(item)" size="mini">功能备注</el-button><el-button size="mini" type="primary" @click="onDialogCheck(item)">角色分配</el-button></td>
        </tr>
        </tbody>
      </table>
      <div id="edit">
        <el-dialog title="角色分配" :visible.sync="dialogVisible" width="30%">
          <el-form :model="ruleForm" ref="ruleForm" label-width="70px">
            <el-form-item>
              <el-checkbox-group v-model="ruleForm.part_ids" size="mini" @change="onAuth">
                <el-checkbox :label="item.id"  v-for="(item, key) in parts" :key="key" border>{{item.part_name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitForm">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div id="content">
        <el-dialog title="功能说明" :visible.sync="dialogContent" width="30%">
          <el-form :model="ruleContent" ref="ruleContent" label-width="70px">
            <el-form-item label="功能说明">
              <el-input v-model="ruleContent.content"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitContent">提交</el-button>
              <el-button @click="this.dialogContent = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { getInterfaces, UpdateInterfaces, getInterface } from '../../api/Interfaces'
  import { getParts } from '../../api/part'
  import { replyRes } from '../../utils/res'

  export default {
    name: 'auth',
    data() {
      return {
        searchForm: {
          page: 1,
          pageSize: 10,
          totalCount: 0
        },
        ruleForm: {
          id: null,
          part_ids: []
        },
        ruleContent: {
          id: null,
          content: ''
        },
        dialogVisible: false,
        dialogContent: false,
        loading: {
          part: false,
          user: false
        },
        parts: {},
        list: {}
      }
    },
    mounted() {
      this.fetchInterfaces()
      this.fetchParts()
    },
    methods: {
      fetchInterfaces() {
        getInterfaces(this.searchForm).then(res => {
          if (replyRes(res)) {
            this.list = res.data._items
            this.searchForm.totalCount = res.data._meta.totalCount
          }
        })
      },
      fetchInterface(id) {
        getInterface({ id: id }).then(res => {
          this.ruleContent = res.data
          if (res.data.part_ids !== null) {
            for (const x in res.data.part_ids) {
              res.data.part_ids[x] = parseInt(res.data.part_ids[x])
            }
          } else {
            res.data.part_ids = []
          }
          this.ruleForm = Object.assign(this.ruleForm, { id: res.data.id, part_ids: res.data.part_ids })
        })
      },
      fetchParts() {
        getParts({ pageSize: 100 }).then(res => {
          this.parts = res.data._items
          console.log(this.parts)
        })
      },
      // 权限分配窗口
      onDialogCheck(item) {
        this.dialogVisible = true
        this.fetchInterface(item.id)
        this.ruleForm.id = item.id
      },
      // 功能描述窗口
      onDialogContent(item) {
        this.fetchInterface(item.id)
        this.ruleContent.id = item.id
        this.dialogContent = true
      },
      onAuth() {
        console.log(this.ruleForm.part_ids)
      },
      onSubmitForm() {
        this.dialogVisible = false
        UpdateInterfaces(this.ruleForm).then(res => {
          if (replyRes(res)) {
            this.fetchInterfaces()
          }
        })
      },
      onSubmitContent() {
        this.dialogContent = false
        UpdateInterfaces(this.ruleContent).then(res => {
          if (replyRes(res)) {
            this.fetchInterfaces()
          }
        })
      },
      // 一页多少行
      handleSizeChange(pageSize) {
        this.searchForm.pageSize = pageSize
        this.fetchInterfaces()
      },
      // 翻页
      handlePageChange(currentPage) {
        this.searchForm.page = currentPage
        this.fetchInterfaces()
      }
    }
  }
</script>

<style scoped>

</style>
